<template>
  <div class="tab-chart">
    <div class="tab-chart__header">
      <ul class="tab-chart__tab">
        <li class="active">使用次数</li>
        <!-- <li>使用车位量</li> -->
      </ul>

      <div class="fr">
        <span :class="{'tab-chart__year': true, 'active':type === 'day' }" @click="changeType('day')">今日</span>
        <span :class="{'tab-chart__year': true, 'active':type === 'week' }" @click="changeType('week')">近一周</span>
        <span :class="{'tab-chart__year': true, 'active':type === 'mouth' }" @click="changeType('mouth')">近半月</span>
      </div>

      <!-- <div></div> -->
    </div>

    <div class="tab-chart__container">
      <e-charts ref="echarts" :option="chartOptions" autoresize />
    </div>
  </div>
</template>

<script>
import { isPc } from '@/utils'

const barWidth = isPc() ? 25 : 15

export default {
  data() {
    return {
      chartOptions: {
        ramdom: 1,
        grid: {
          top: '20px',
          bottom: '30px',
          right: '10px',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: [],
          offset: 5,
          minInterval: 1,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          offset: 20,
          minInterval: 1,
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          }
        },
        tooltip: {
          trigger: 'axis',
          formatter: comp => {
            const [serie] = comp

            return `${serie.seriesName}：${serie.value}`
          },
          axisPointer: {
            show: true,
            status: 'shadow',
            z: -1,
            shadowStyle: {
              color: '#E6F7FF'
            },
            type: 'shadow'
          },
          extraCssText: 'width:120px; white-space:pre-wrap'
        },
        series: [
          {
            barWidth,
            name: '使用次数',
            type: 'bar',
            data: [],
            itemStyle: {
              color: '#4165d7'
            }
          },
          {
            type: 'bar',
            barWidth,
            xAxisIndex: 0,
            barGap: '-100%',
            data: [],
            itemStyle: {
              color: '#f1f1f9'
            },
            zlevel: -1
          }
        ]
      },
      type: 'day'
    }
  },
  mounted() {
    if (this.type === 'day') {
      this.chartOptions.xAxis.data = new Array(24).fill(1).map((e, i) => i + 1 + '点')
      console.log('this.chartOptions.xAxis.data', this.chartOptions.xAxis.data)
      this.chartOptions.series[0].data = new Array(24).fill(1).map((e, i) => 0)
      // this.chartOptions.series[0].data =[1, 100, 2, 200, 30, 50, 10, 100, 2, 200, 30, 50]
    }
    // this.chartOptions.xAxis.data = new Array(12).fill(1).map((e, i) => i + 1 + "月");
    // this.chartOptions.series[0].data = [1, 100, 2, 200, 30, 50, 10, 100, 2, 200, 30, 50];
    // this.chartOptions.series[1].data = new Array(12).fill(200);
    this.getInfo('day')
  },
  methods: {
    changeType(type) {
      this.type = type
      this.getInfo()
    },
    getInfo(type) {
      // this.$service.home.getInfo().then((res) => {
      //   // this.topInfo = res.topInfo.info4
      //   // this.per = parseInt((this.topInfo.handled / this.topInfo.workorderNum) * 100)

      //   if (this.type === 'day') {
      //     this.chartOptions.xAxis.data = new Array(24).fill(1).map((e, i) => i + 1 + '点')
      //     this.chartOptions.series[0].data = res.zhu && res.zhu.day && res.zhu.day.list
      //     if (res.zhu && res.zhu.day && res.zhu.day.list) {
      //       res.zhu.day.list.forEach((item) => {
      //         if (item === undefined) {
      //           item = 0
      //         }
      //       })
      //     }
      //     if (this.$refs['echarts'] && this.$refs['echarts'].inst) {
      //       this.$refs['echarts'].inst.setOption(this.chartOptions)
      //     }
      //   }
      //   if (this.type === 'week') {
      //     const arr = []
      //     if (res.zhu && res.zhu.week && res.zhu.week.label) {
      //       res.zhu.week.label.forEach((item) => {
      //         arr.push(item.substring(5, 11))
      //       })
      //     }
      //     this.chartOptions.xAxis.data = arr
      //     this.chartOptions.series[0].data = res.zhu && res.zhu.week && res.zhu.week.list
      //     if (this.$refs['echarts'] && this.$refs['echarts'].inst) {
      //       this.$refs['echarts'].inst.setOption(this.chartOptions)
      //     }
      //   }
      //   if (this.type === 'mouth') {
      //     const arr = []
      //     if (res.zhu && res.zhu.mouth && res.zhu.mouth.label) {
      //       res.zhu.mouth.label.forEach((item) => {
      //         arr.push(item.substring(8, 11))
      //       })
      //     }
      //     this.chartOptions.xAxis.data = arr
      //     this.chartOptions.series[0].data = res.zhu && res.zhu.mouth && res.zhu.mouth.list
      //     // this.chartOptions.xAxis.data = res.zhu && res.zhu.mouth && res.zhu.mouth.label;
      //     if (this.$refs['echarts'] && this.$refs['echarts'].inst) {
      //       this.$refs['echarts'].inst.setOption(this.chartOptions)
      //     }
      //   }
      // })
    }
  }
}
</script>

<style lang="scss" scoped>
.tab-chart {
	&__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 50px;
		padding: 0 20px;

		ul {
			li {
				list-style: none;
				float: left;
				margin-right: 20px;
				font-size: 15px;
				color: #dbdbdb;
				cursor: pointer;

				&.active {
					color: $color-main;
					font-weight: bold;
				}
			}
		}
	}

	&__year {
		font-size: 14px;
		position: relative;

		&::before {
			display: block;
			content: "";
			height: 8px;
			width: 8px;
			border-radius: 8px;
			background-color: $color-main;
			position: absolute;
			left: -15px;
			top: 4px;
		}
	}

	&__container {
		height: 300px;
		padding: 0 15px;

		.echarts {
			height: 100%;
			width: 100%;
		}
	}
}

.tab-chart__year.active{
	color: #409EFF;

	&::before{
		background-color: #409EFF;
	}
}

.tab-chart__year{
	cursor: pointer;
	width: 75px;
	display: inline-block;
}
</style>
